<template>
  <div
    class="wrap-item"
    :style="{
      '--scroll-width': '40px',
    }"
  >
    <div class="wrap-other-roll">
      <el-form label-width="160px" :model="form" size="medium">
        <el-form-item label="网站域名" required>
          <el-input
            v-model.trim="form.loginUrl"
            clearable
            maxlength="100"
            placeholder="请输入文件域名"
          ></el-input>
        </el-form-item>
        <el-form-item label="文件域名" required>
          <el-input
            v-model.trim="form.fileDomain"
            clearable
            maxlength="100"
            placeholder="请输入文件域名"
          ></el-input>
        </el-form-item>
        <el-form-item label="文件目录" required>
          <el-input
            v-model.trim="form.dir"
            clearable
            maxlength="100"
            placeholder="请输入文件目录"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码出错">
          <el-input-number
            v-model="form.lockAccountCount"
            :min="1"
            :max="100"
            step-strictly
            style="width: calc(100% - 100px)"
          ></el-input-number>
          &nbsp;&nbsp;次，锁定账号
        </el-form-item>
        <el-form-item label="账号锁定时长">
          <el-input-number
            v-model="form.lockAccountSeconds"
            :min="1"
            :max="1000000000"
            step-strictly
            style="width: calc(100% - 30px)"
          ></el-input-number>
          &nbsp;&nbsp;秒
        </el-form-item>
        <el-form-item label="并发请求数/秒">
          <el-input-number
            v-model="form.qpsConcurrency"
            :min="1"
            :max="100000"
            step-strictly
            style="width: 100%"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="每日最大请求数">
          <el-input-number
            v-model="form.qpsDayLimit"
            :min="1"
            :max="100000"
            step-strictly
            style="width: 100%"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="门户cookie域名">
          <el-input
            v-model.trim="form.cookieDomain"
            clearable
            maxlength="100"
            placeholder="请输入门户cookie域名"
          ></el-input>
        </el-form-item>
        <el-form-item label="后台管理端cookie域名">
          <el-input
            v-model.trim="form.adminCookieDomain"
            clearable
            maxlength="100"
            placeholder="请输入后台管理端cookie域名"
          ></el-input>
        </el-form-item>
        <el-form-item label="移动端cookie域名">
          <el-input
            v-model.trim="form.mobileCookieDomain"
            clearable
            maxlength="100"
            placeholder="请输入后台管理端cookie域名"
          ></el-input>
        </el-form-item>
        <el-form-item label="日志持久化订阅方式">
          <el-select
            clearable
            v-model="form.logPersistWay"
            placeholder="请选择日志持久化订阅方式"
            style="width: 100%"
          >
            <el-option label="redis订阅" value="1"></el-option>
            <el-option label="mq订阅" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="限速url前缀">
          <el-tag
            :key="tag"
            v-for="tag in dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput"
            >+ 添加url</el-button
          >
        </el-form-item>
        <el-form-item label="是否开启错误日志存储">
          <el-select
            clearable
            v-model="form.logOk"
            placeholder="请选择是否开启错误日志存储"
            style="width: 100%"
          >
            <el-option label="否" value="0"></el-option>
            <el-option label="是" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="text-align: center">
          <span
            class="wrap-btn wrap-success"
            v-if="$checkPermission(102)"
            @click="save"
            >确定</span
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
    }
  },
  created() {
    this.itemList()
  },
  methods: {
    itemList() {
      // 获取列表
      this.$axios.get('/admin/global/find').then((data) => {
        this.form = {}
        if (data.code == 200) {
          this.form = data.data || {}
          this.dynamicTags = !data.data.qpsFlowUrl
            ? []
            : data.data.qpsFlowUrl.split(',')
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    save() {
      //保存
      if (!this.form.loginUrl) {
        this.$message.error('请输入网站域名')
        return
      }
      if (!this.form.fileDomain) {
        this.$message.error('请输入文件域名')
        return
      }
      if (!this.form.dir) {
        this.$message.error('请输入文件目录')
        return
      }
      this.form.qpsFlowUrl = this.dynamicTags.join(',')
      this.$axios.post('/admin/global/edit', this.form).then((data) => {
        if (data.code == 200) {
          this.$message.success('操作成功！')
          this.itemList()
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },

    showInput() {
      this.inputVisible = true
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm() {
      let inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
  },
}
</script>
<style lang="scss" scoped>
.wrap-other-roll {
  width: 888px;
  margin: 20px auto;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
